<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
          #bigbox{
            margin: 150px auto ;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            position: relative;
            /* transform-origin: center center -150px; */
            transform: rotateX(90deg) rotateY(-90deg); 

        }
        .box{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
            opacity: 0.4;    
        }
        .box img{
            width: 100%;
            height: 100%;
        }
        .box1{
            /* top: -300px; */
            /* transform-origin: bottom; */
            transform: translateZ(150px);
        }
        .box2{
             transform: translateZ(-150px) rotateY(180deg);
        }
        .box3{
            /* left:-300px; */
            /* transform-origin: right; */
            transform: translateX(-150px) rotateY(-90deg);
        }
        .box4{
            /* top:300px; */
            /* transform-origin: top; */
            transform: translateX(150px) rotateY(90deg);
        }
        .box5{
            /* left:300px; */
            /* transform-origin: left; */
            transform: translateY(-150px) rotateX(90deg);
        }
        .box6{
            transform: translateY(150px) rotateX(-90deg);
        }
      
        .box-n{
            width: 150px;
            height: 150px;
            position: absolute;
            top:75px;
            left:75px;
            opacity: 0.8;   
        }
         .box-n img{
            width: 100%;
            height: 100%;
        }
        .n1{
            transform: translateZ(75px);
        }
        .n2{
            /* top: -150px; */
            /* transform-origin: bottom; */
            transform: translateZ(-75px) rotateY(180deg);
        }
        .n3{
            /* left:-150px; */
            /* transform-origin: right; */
            transform: translateX(-75px) rotateY(-90deg);
        }
        .n4{
            /* top:150px; */
            /* transform-origin: top; */
            transform: translateX(75px) rotateY(90deg);
        }
        .n5{
            /* left:150px; */
            /* transform-origin: left; */
            transform: translateY(-75px) rotateX(90deg);
        }
        .n6{
            transform: translateY(75px) rotateX(-90deg);
        }
        #bigbox:hover .box1{
            transform: translateZ(300px);
        }
        #bigbox:hover .box2{
            transform: translateZ(-300px) rotateY(180deg);
        }
        #bigbox:hover .box3{
            transform: translateX(-300px) rotateY(-90deg);
        }
        #bigbox:hover .box4{
            transform: translateX(300px) rotateY(90deg);
        }
        #bigbox:hover .box5{
            transform: translateY(-300px) rotateX(90deg);
        }
        #bigbox:hover .box6{
            transform: translateY(300px) rotateX(-90deg);
        }
    </style>
</head>
<body>
    <div id="bigbox">
        <div class="box box1">
                <img src="./imgs/QQ图片20190516094107.jpg" alt="">
        </div>
        <div class="box box2">
                <img src="./imgs/QQ图片20190516094117.jpg" alt="">
        </div>
        <div class="box box3">
                <img src="./imgs/QQ图片20190521171043.jpg" alt="">
        </div>
        <div class="box box4">
                <img src="./imgs/psb (6).jpg" alt="">
        </div>
        <div class="box box5">
                <img src="./imgs/psb.jpg" alt="">
        </div>
        <div class="box box6">
                <img src="./imgs/psb2.jpg" alt="">
        </div>
        <!-- <div class="divb"> -->
            <!-- <div id="xiaobox" class="zhuan"> -->
                <div class="box-n n1">
                        <img src="./imgs/QQ图片20190516094107.jpg" alt="">
                </div>
                <div class="box-n n2">
                        <img src="./imgs/QQ图片20190516094117.jpg" alt="">
                </div>
                <div class="box-n n3">
                        <img src="./imgs/QQ图片20190521171043.jpg" alt="">
                </div>
                <div class="box-n n4">
                        <img src="./imgs/psb (6).jpg" alt="">
                </div>
                <div class="box-n n5">
                        <img src="./imgs/psb.jpg" alt="">
                </div>
                <div class="box-n n6">
                        <img src="./imgs/psb2.jpg" alt="">
                </div>
            <!-- </div>
        </div>  -->
    </div>
</body>
<script>
    var wai = document.getElementById('bigbox');
  
    var shu = 1 ;
    setInterval( function(){
        shu++
        wai.style.transform='rotateX('+shu+'deg) rotateY('+shu+'deg)';
    },30);
  
</script>
</html>